<template>
  <div class="map-chart">
    <div id="map" ref="container" />
    <div id="myPageTop">
      <table>
        <tr>
          <td>
            <label>请输入关键字：</label>
          </td>
        </tr>
        <tr>
          <td>
            <input id="tipinput" />
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "Map",
  props: [],
  data() {
    return {
      placeSearch: null
    };
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    /*global AMap*/
    mapInit() {
      const map = new AMap.Map(this.$refs.container, {
        resizeEnable: true
      });

      // 创建Map实例
      const options = {
        showButton: true, // 是否显示定位按钮
        buttonPosition: "LB", // 定位按钮的位置

        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
        showMarker: true, // 是否显示定位点
        showCircle: true, // 是否显示定位精度圈
        circleOptions: {
          // 定位精度圈的样式
          strokeColor: "#0093FF",
          noSelect: true,
          strokeOpacity: 0.5,
          strokeWeight: 1,
          fillColor: "#02B0FF",
          fillOpacity: 0.25
        },
        zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
      };
      AMap.plugin(["AMap.Geolocation"], function() {
        const geolocation = new AMap.Geolocation(options);
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
      });
      const _this = this;
      AMap.event.addListener(map, "click", function(e) {
        map.clearMap(); // 清除地图上所有添加的覆盖物
        new AMap.Marker({
          position: e.lnglat,
          map: map
        });
        _this.handleMap(e.lnglat.getLng(), e.lnglat.getLat());
      });

      //.入提示
      const autoOptions = {
        input: "tipinput"
      };
      const auto = new AMap.Autocomplete(autoOptions);
      this.placeSearch = new AMap.PlaceSearch({
        map: map
      });
      // 构造地点查询类
      AMap.event.addListener(auto, "select", this.select); // 注册监听，当选中某条记录时会触发
      AMap.event.addListener(this.placeSearch, "markerClick", function(e) {
        _this.$emit("bMapDate", e.data.location.lng, e.data.location.lat);
      });
    },
    select(e) {
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name); // 关键字查询查询
    },
    handleMap(o, a) {
      this.$emit("bMapDate", o, a);
    }
  }
};
</script>

<style scoped lang="less">
.map-chart {
  position: relative;
  margin-bottom: 15px;
  width: 100%;
  height: 200px;
  border: 1px #dddddd solid;
}
.amap-logo,
.amap-copyright {
  display: none !important;
}

#map {
  margin-bottom: 15px;
  width: 100%;
  height: 200px;
  border: 1px #dddddd solid;
}

.button-group {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 12px;
  padding: 10px;
}

.button-group .button {
  height: 28px;
  line-height: 28px;
  background-color: #0d9bf2;
  color: #fff;
  border: 0;
  outline: none;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 3px;
  margin-bottom: 4px;
  cursor: pointer;
}
.button-group .inputtext {
  height: 26px;
  line-height: 26px;
  border: 1px;
  outline: none;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 3px;
  margin-bottom: 4px;
  cursor: pointer;
}
#tip {
  background-color: #fff;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
  font-size: 12px;
  right: 10px;
  top: 20px;
  border-radius: 3px;
  border: 1px solid #ccc;
  line-height: 30px;
}
.amap-info-content {
  font-size: 12px;
}
#myPageTop {
  position: absolute;
  top: 5px;
  right: 10px;
  background: #fff none repeat scroll 0 0;
  border: 1px solid #ccc;
  margin: 10px auto;
  padding: 6px;
  font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
  font-size: 14px;
  z-index: 99999999;
}
#myPageTop label {
  margin: 0 20px 0 0;
  color: #666666;
  font-weight: normal;
}
#myPageTop input {
  width: 170px;
}
#myPageTop .column2 {
  padding-left: 25px;
}
</style>
